<template>
  <div class="page-error">
    <div class="page-main-area">
      <div class="error-container">
        <div class="error-container__oops app-primary-color__text">
          401错误！
        </div>
        <div class="error-container__headline">{{ to }}</div>
        <div class="error-container__headline app-text-color__text">
          无访问权限！
        </div>
        <div class="error-container__info app-text-prompt-color__text">
          对不起，您没有权限访问该页面，请联系管理员。
        </div>
        <router-link to="/" class="error-container__return-home">
          <app-button type="primary">返回首页</app-button>
        </router-link>
        <div class="error-container__return-home">
          <app-button
            type="primary"
            plain
            @click="$router.replace({ path: from || '' })"
          >
            返回上一页
          </app-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageError',
  data() {
    return {
      to: '',
      from: ''
    };
  },
  computed: {},
  mounted() {
    const params = this.$route.query || {};
    this.to = params.to;
    this.from = params.from;
  }
};
</script>

<style lang="scss" scoped>
@import '../assets/style/error-page.scss'
</style>
